<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
const modules = [Autoplay, Navigation];
const props = defineProps({
    list: {
        type: Array,
        fileUrl: String,
    },
    navigation: {
        type: Boolean,
        default: true,
    },
});
</script>
<template>
    <div class="swiperBox">
        <swiper direction="horizontal" :loop="true" :autoplay="{ disableOnIntercation: false, autoplay: false, delay: 2400 }" slidesPerView="auto" :spaceBetween="0" :centeredSlides="true" :modules="modules">
            <swiper-slide v-for="(item, key) in list" :key="key">
                <img :src="item.fileUrl" obj-fit="cover" alt="" style="width: 100%; height: 100%" />
            </swiper-slide>
        </swiper>
    </div>
</template>

<style scoped>
.swiper-slide {
    width: 100%;
    height: 40rem;
    transition: all 0.3s ease-in-out;
}

.swiper-slide-prev {
    transform: scale(0.5);
}
.swiper-slide-next {
    transform: scale(0.5);
}
</style>
